<template>
	<view class="audio-panel">
		<view class="operation-area">
			<AddButton @click="openFileSelectModePopup"></AddButton>
			<uni-icons @click="openSettingPopup" type="gear-filled" size="30"></uni-icons>
		</view>
		<AudioPlayerPanel :type="props.type" ref="audioPlayerRef"></AudioPlayerPanel>
		
		<FileSelectModePopup :allowed="allowedChooseTypes" @change="modeChange" ref="fileSelectModePopupRef"></FileSelectModePopup>
		<FileNameInputPopup v-model:fileName="fileName" ref="fileNameInputRef" @confirm="handleConfirm" @cancel="handleCancel"></FileNameInputPopup>
		<SettingPopup ref="settingPopupRef"></SettingPopup>
	</view>
</template>

<script lang="ts" setup>
import { emitEvent } from '@/hooks/useEventBus';
import { showToast } from "@/utils/util";
import fileManager from "@/utils/fileManager";
import FileSelectModePopup from '../FileSelectModePopup/FileSelectModePopup.vue';
import type { ChooseType } from '../FileSelectModePopup/FileSelectModePopup.vue';
import FileNameInputPopup from '../FileNameInputPopup/FileNameInputPopup.vue';
import SettingPopup from '../SettingPopup/SettingPopup.vue';
import AudioPlayerPanel from "../AudioPlayerPanel/AudioPlayerPanel.vue";
import AddButton from "../AddButton/AddButton.vue";

import { ref, defineProps, withDefaults } from "vue";

export type AudioType = "voice" | "music";

interface Props {
	type: AudioType
}

const props = withDefaults(defineProps<Props>(), {
	type: "music"
})

const fileName = ref("");
const fileSelectModePopupRef = ref(null);
const fileNameInputRef = ref(null);
const settingPopupRef = ref(null);
const audioPlayerRef = ref<InstanceType<typeof AudioPlayerPanel>>();
const allowedChooseTypes: Array<ChooseType> = ["wxchat"];

const file = ref<UniApp.ChooseFile>();

function openSettingPopup() {
	settingPopupRef.value && (settingPopupRef.value as any).open();
}

// 打开文件上传方式选择弹框
function openFileSelectModePopup() {
	fileSelectModePopupRef.value && (fileSelectModePopupRef.value as any).open();
}

// 选择文件上传方式后触发
async function modeChange(type: ChooseType) {
	const res = await fileManager.chooseMessageFile("audio");
	console.log("voicePanel", res);
	// 选择了文件后，打开对话框，输入文件名
	if (res.length) {
		file.value = res[0];
		fileName.value = "";
		fileNameInputRef.value && (fileNameInputRef.value as any).open();
	}

}

// 点击输入文件名弹框确认按钮后触发
function handleConfirm(name: string) {
	saveFile(name);
}

// 点击输入文件名弹框取消按钮后触发
function handleCancel() {
	saveFile("");
}


// 保存选择的文件到本地
const saveFile = (name: string): void => {
	fileName.value = name;
	fileNameInputRef.value && (fileNameInputRef.value as any).close();
	// 保存文件
	const res = fileManager.saveFile(props.type, {
		customName: name,
		originalName: file.value!.name,
		path: file.value!.path
	})
	
	showToast("添加", res ? "success" : "error");
	console.log("保存文件：", res);
	// 获取最新的文件列表
	emitEvent("getFileList", null);
}

</script>

<style lang="scss" scoped>
.audio-panel {
	.operation-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx auto;
	}
}
</style>